<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>mamma</title>
<link rel="shortcut icon" href="../../image/icon_mamma.ico">
<script src="../../js/jquery-2.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var width = $(window).width();
	var height = $(window).height();
	
	$('div.main').css('width', width);
	$('div.main').css('height', height);
	
	$('img.background').css('width', width);
	
	$('div.intro').css('margin-top', height/2-150 + 'px');
	$('div.intro').css('margin-left', (width/2-250) + 'px');
	$('div.intro').css('margin-right', (width/2+250) + 'px');
	
	$('#errorMessage').css('display', 'none');
	
	$('input.form').keyup(function(event){
		if(event.which == 13){
			$('input.button').trigger('click');
		}
	});
});

function formCheck(){
	$('#errorMessage').css('display', 'none');
	
	var id = $('#id');
	
	if(id.val() == ''){
		
		var html = "";
		html += "계정 이메일을 입력해 주세요.";
		$('#errorMessage').fadeIn('slow');
		$('#errorMessage').html(html);
		
		id.focus();
		return false;
	}
	
	var password = $('#password');
	
	if(password.val() == ''){
		var html = "";
		html += "비밀번호를 입력해 주세요.";
		$('#errorMessage').fadeIn('slow');
		$('#errorMessage').html(html);
		
		password.focus();
		return false;
	}
	
	$.ajax({
		url: "../../member/login.action"
		, type: "POST"
		, dataType: "json"
		, data: {
			email: id.val()
			, password: password.val()
		}
		, error: function(){
			var html = "";
			html += "이메일이 존재하지 않거나 비밀번호가 다릅니다.";
			$('#errorMessage').fadeIn('slow');
			$('#errorMessage').html(html);
		}
		, success: function(json){
			if(json.memberVo.adminCheck > 0){
				location.href="../../jsp/admin/admain.jsp";
			}
			else{
				location.href="../../member/goHome.action?email="+id.val();
			}
		}
	});
}
</script>
<style type="text/css">
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
body { font-family: 'Nanum Gothic', serif; }

h1 { display: hidden; }
body { overflow: hidden; }
div.main { 
	position: absolute;
	left: 0;
	overflow: hidden;
	background-color: black;
	z-index: 1;
	top: 0;
	overflow: hidden;
	text-align: center;
	background-image: url("../../image/login/login01.JPG");
	background-repeat: no-repeat;
	background-size: cover;
}
div.intro{
	position: absolute;
	z-index: 10;
	height: 300px;
	width: 500px;
}
div.loginForm { display: none; }
#errorMessage {
	margin: 0 auto;
	width: 280px;
	height: 30px;
	font-size: 10pt;
	color: white;
	background-color: #333333;
	opacity: .9;
	padding: 10px 10px 10px 10px;
}
input.form {
	width: 278px;
	height: 30px;
	font-size: 12pt;
	border-radius: 3px;
	border: 1px solid lightgray;
	padding-left: 10px;
	padding-right: 10px;
}
span { color: white; }
span.title {
	font-size: 20pt;
	font-weight: bold;
}
input.button {
	height: 50px;
	width: 300px;
	font-size: 12pt;
	cursor: pointer;
	font-weight: bold;
	border-radius: 3px;
	
	background: #ffaf4b; /* Old browsers */
	background: -moz-linear-gradient(top, #ffaf4b 0%, #ff920a 100%);
	/* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffaf4b),
		color-stop(100%, #ff920a)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffaf4b 0%, #ff920a 100%);
	/* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffaf4b 0%, #ff920a 100%);
	/* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ffaf4b 0%, #ff920a 100%);
	/* IE10+ */
	background: linear-gradient(to bottom, #ffaf4b 0%, #ff920a 100%);
	/* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b',
		endColorstr='#ff920a', GradientType=0); /* IE6-9 */
	border: 0;
}
a { 
	font-size: 10pt; 
	text-decoration: none;
	color: white;
	cursor: pointer;
}
</style>
</head>
<body>
<script type="text/javascript">
$.ajax({
	url: "../../member/loginCheck.action"
	, type: "POST"
	, dataType: "json"
	, success: function(json){
		if(json.memberVo == null) $('div.loginForm').css('display', 'block');
		var id = json.memberVo.email;
		if(json.memberVo.adminCheck > 0){
			location.href="../../jsp/admin/admain.jsp";
		}
		else{
			location.href="../../member/goHome.action?email="+id;
		}
	}
});
</script>
	<h1>로그인</h1>
	<div class="main">
		<div class="intro">
			<span class="title">우리의 기억<br>잊지 못할 순간의 기록</span><br><br>
			<div class="loginForm">
				<!-- 로그인 폼 -->
				<input class="form" id="id" name="memberVo.email" type="text" placeholder="계정(이메일)" /><br> <br>
				<input class="form" id="password" name="memberVo.password" type="password" placeholder="비밀번호" /><br><br>
				<div id="errorMessage"></div><br>
				<input class="button" type="button" value="로그인" onclick="javascript:formCheck()"></input><br>
				<br> <a href="../../member/goSignupPage.action">회원가입</a>
			</div>
		</div>
	</div>
</body>
</html>